import React, {useEffect, useState} from "react";
import {Route, Routes, Navigate} from "react-router-dom";
import axios from "axios";

import { connect } from 'react-redux';
import {Spin} from "antd";

import Home from "../home/Home";
import UserList from "../user-manage/UserList";

import RightList from "../right-manage/RightList";
import RoleList from "../right-manage/RoleList";

import NewsAdd from "../news-manage/NewsAdd";
import NewsDraft from "../news-manage/NewsDraft";
import NewsCategory from "../news-manage/NewsCategory";
import NewsPreview from "../news-manage/NewsPreview";
import NewsUpdate from "../news-manage/NewsUpdate";

import AuditNews from "../audit-manage/AuditNews";
import AuditList from "../audit-manage/AuditList";

import Unpublished from "../publish-manage/Unpublished";
import Published from "../publish-manage/Published";
import Sunset from "../publish-manage/Sunset";

import NoPermission from "../../nopermission/NoPermission";

// import NoFound from "../../nofound/NoFound";

// 本地路由映射表
const LocalRouterMap= {
    "/home": <Home />,
    "/user-manage/list": <UserList />,

    "/right-manage/role/list": <RoleList />,
    "/right-manage/right/list": <RightList />,

    "/news-manage/add": <NewsAdd />,
    "/news-manage/draft": <NewsDraft />,
    "/news-manage/category": <NewsCategory />,
    "/news-manage/preview/:id": <NewsPreview />,
    "/news-manage/update/:id": <NewsUpdate />,


    "/audit-manage/audit": <AuditNews />,
    "/audit-manage/list": <AuditList />,

    "/publish-manage/unpublished": <Unpublished />,
    "/publish-manage/published": <Published />,
    "/publish-manage/sunset": <Sunset />,
}


function NewsRouter(props) {

    const [backRouteList, setBackRouteList] = useState([]);
    useEffect(()=>{
        Promise.all([
            axios.get('/api/rights'),
            axios.get('/api/children')
        ]).then(res=>{
            // console.log(res);
            setBackRouteList([...res[0].data, ...res[1].data]);
        })
    }, []);

    const { role: {rights}  } = JSON.parse(localStorage.getItem('token'));

    // 当前路由权限的配置是否打开
    const checkRoute= (item)=>{
        // 页面权限 || 路由权限
        return LocalRouterMap[item.key] && (item.pagepermission === 1 || item.routepermisson===1);
    }

    // 当前登录用户的权限
    const checkUserPermission= (item)=>{
        return rights.includes(item.key);
    }

    return (
        <Spin size="large" spinning={ props.isLoading }> {/*添加 加载效果(加载中)*/}
            <Routes>
                {
                    backRouteList.map(item=>{
                        if(checkRoute(item) && checkUserPermission(item)) {
                            return <Route path={item.key} element={LocalRouterMap[item.key]} key={item.id} exact />
                        } else {
                            // return <Route path={item.key} element={<NoPermission />} key={item.id} exact />
                            return null;
                        }
                    })
                }

                <Route path="/" element={<Navigate to="/home" />} exact />

                {
                    backRouteList.length > 0 && <Route path="*" element={<NoPermission />} />
                }
            </Routes>
        </Spin>
    );
}

// export default NewsRouter;

const mapStateToProps= ({loadingReducer: { isLoading }})=>({ isLoading })
export default connect(mapStateToProps)(NewsRouter);

/*
export default function NewsRouter() {
    return (
        <Routes>
            <Route path="/home" element={ <Home /> } />
            <Route path="/user-manage/list" element={ <UserList /> } />
            <Route path="/right-manage/role/list" element={ <RoleList /> } />
            <Route path="/right-manage/right/list" element={ <RightList /> } />

            <Route path="/" element={<Navigate to="/home" />} exact /> {/!*路由重定向*!/}
            <Route path="*" element={<NoPermission />} /> {/!*无权限组件*!/}
        </Routes>
    );
}
*/
